<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket聊天室</title>
</head>
<body>
	<script type="text/javascript">
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://localhost:8081/ws");
			socket.onmessage = function(event) {
				var ta = document.getElementById('rt');
				ta.value = ta.value + "\n" + event.data;
			};
			socket.onopen = function(event) {
				var ta = document.getElementById('rt');
				ta.value = "连接开启";
			};
			socket.onclose = function(event) {
				var ta = document.getElementById('rt');
				ta.value = ta.value + "连接关闭";
			};

		} else {
			alert("你的浏览器不支持web Socket！！！");
		}

		function send(msg) {
			//alert("发送消息");
			if (!window.WebSocket) {
				return;
			}
			if (socket.readyState == WebSocket.OPEN) {
				socket.send(msg);
				document.getElementById("content").value="";
			} else {
				alert("连接没有开启");
			}
		}
	</script>

	<form onsubmit="return false;">
		<h3>聊天室</h3>
		<textarea id="rt" style="width: 500px; height: 300px"></textarea>
		<br /> <input id="content" type="text" name="msg" style="width: 300px"
			value="Welcom to websocket"> <input type="button"
			value="发送消息" onclick="send(this.form.msg.value)"> <input
			type="button"
			onclick="javascript:document.getElementById('rt').value=''"
			value="清空聊天" />
	</form>
</body>
</html>